<template>
    <el-main>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="create(false)" type="primary"> + 添加</el-button>

            </div>
        </div>


        <el-dialog width="450px" :title="title" @close="() => closed()" v-model="dialogVisible">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio label="video">视频</el-radio>
                        <el-radio label="vector">文档</el-radio>
                        <el-radio label="question">题目</el-radio>
                        <el-radio label="interaction">互动</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 'video'" label="视频id">
                    <el-input v-model="ruleForm.videoid"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 'vector'" label="文档id">
                    <el-input v-model="ruleForm.secretfileid"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 'question'" label="题单ID">
                    <el-input v-model="ruleForm.questionid"></el-input>
                </el-form-item>
                <el-form-item label="录音地址">
                    <el-input v-model="ruleForm.audiourl"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ruleForm.info"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 'interaction'" label="互动设置">
                    <el-button @click="changeslidev">修改</el-button>
                    <el-button @click="getslidev">获取</el-button>
                </el-form-item>

                <el-form-item v-show="ruleForm.type === 'interaction'" label="md">
                    <el-input type="textarea" v-model="ruleForm.md"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <div class="row mb-1">
            <div class="col">
                <el-table :data="tableData" border height="65vh" style="width: 100%">

                    <el-table-column label="名称" prop="name">
                    </el-table-column>
                    <el-table-column label="备注" prop="info">
                    </el-table-column>
                    <el-table-column label="类型" prop="type" width="230">
                        <template #default="scope">
                            {{ type[scope.row.type] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="视频id" prop="videoid">
                    </el-table-column>
                    <el-table-column label="pptid" prop="secretfileid">
                    </el-table-column>
                    <el-table-column label="题单ID" prop="questionid">
                    </el-table-column>
                    <el-table-column label="录音地址" prop="audiourl">
                    </el-table-column>
                    <el-table-column label="操作" width="280">
                        <template #default="scope">
                            <el-button disabled>
                                <a target="_bank" :href="`https://oj.hterobot.com/slidev?id=${scope.row.ID}&key=${1}`"
                                    v-show="scope.row.type === 'interaction'" class="stretched-link"
                                    :to="{ name: '课程组', params: { ID: scope.row.ID } }">
                                    查看
                                </a>
                                <router-link v-show="scope.row.type !== 'interaction'" class="stretched-link"
                                    :to="{ name: '课程组', params: { ID: scope.row.ID } }">
                                    查看
                                </router-link>
                            </el-button>
                            <el-button v-show="scope.row.type === 'interaction'" type="primary"
                                @click="buildslidev(scope.row.ID)">编译
                            </el-button>
                            <el-button @click="create(scope.row)" type="warning">
                                修改
                            </el-button>
                            <el-button @click="delteamuser(scope.row.ID)" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </el-main>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    computed,
    onMounted,
    markRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { toLocaleDateString } from "../../../util/time";
import { Coursesection } from "../data";
import { asyncmiaoadmincreatedorupdatecoursesection, asyncmiaoadmindelcoursesection, asyncmiaoadminselectcoursesection, Iobj } from "../../../api";
import Alymodel from "../../../mysql_interface/model";
import { assign } from "underscore";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";

type KIuser = keyof Alymodel.IMcoursesection;

const p = defineProps<{ ID: number }>()

type Itype = Alymodel.IMcoursesection['type']

const type: Record<Itype, string> = {
    'video': '视频',
    question: '题目',
    'vector': '文档',
    'interaction': '互动'
}

const store = useStore(Storekey)

const dialogVisible = ref(false);
const activeName = ref("详情");
const sortable = ref<"DESC" | "ASC">("DESC");
const IID = ref<number | undefined | boolean>();
const limit = ref(20);
const offset = ref(0);
const order = ref<KIuser>("ID");
const like = ref("");
const title = ref("添加");
const context = ref("context");
const ruleForm = reactive<Alymodel.IMcoursesection>(assign({}, Coursesection));
const rules = reactive({});

const tableData = ref<Alymodel.IMcoursesection[]>([])

const Tteam = computed(() => {
    if (IID.value) {
        return tableData.value.find((v) => v.ID == IID.value);
    }
    return {};
});

const count = ref(0)

function create(data: Alymodel.IMcoursesection | false) {
    if (data) {
        Object.assign(ruleForm, markRaw(data))
    } else {
        Object.assign(ruleForm, assign({}, Coursesection))
    }
    dialogVisible.value = true
}

onMounted(() => {
    start();
    store.state.socket.on('buildslidev', e => {
        ElMessage.success('打包完成')
    })
    store.state.socket.on('changeslidev', e => {
        ruleForm.md = e
    })
});

function buildslidev(id: number) {
    store.state.socket.emit('buildslidev', { id, key: 1 })
}

function changeslidev() {
    store.state.socket.emit('changeslidev', { data: ruleForm.md })
}

function getslidev() {
    store.state.socket.emit('changeslidev')
}


async function start() {
    try {
        let obj: Iobj<Alymodel.IMcoursesection> = {
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value,
        };
        const data = await asyncmiaoadminselectcoursesection(obj)
        tableData.value = data.rows
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}

async function closed() {
    await start();
    IID.value = !IID.value;
}

function formatter(updatedAt?: string | number | Date) {
    return toLocaleDateString(updatedAt);
}

async function delteamuser(ID: number) {
    ElMessageBox.confirm("是否删除此小节？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            asyncmiaoadmindelcoursesection({ ID })
                .then(() => {
                    ElMessage.success("删除成功");
                    start();
                })
                .catch((e) => {
                    ElMessage.error("删除失败" + e);
                });
        })
        .catch(() => { });
}

async function submit() {
    try {
        await asyncmiaoadmincreatedorupdatecoursesection(ruleForm)
        ElMessage.success('添加成功')
        start()
        dialogVisible.value = false
    } catch (e) {
        ElMessage.error(e)
    }
}


</script>